<template>
  <div class="searchitem">
    <div class="search">     
      <img :src="imageUrl" class="aphorism_img" />
      <h1 class="orgname">{{ item.orgName }} <h3>编号：{{item.orgCode}} &nbsp &nbsp &nbsp &nbsp &nbsp 校长：{{ item.principal }}</h3></h1>
      <h1 class="description" >{{ item.description }}</h1>
    </div>
  </div>
</template>

<script lang="ts">

import { defineComponent,ref, PropType} from "vue";
import {imageShow} from "../utils/common"
export interface OrgDescription {
  description: string | undefined;
  imageUrl: string;
  orgCode: string | undefined;
  orgName: string | undefined;
  principal: string | undefined;
}
export default defineComponent({
  props: {
    info!: Object as PropType<OrgDescription>
  },
setup: (props, context) => {
    var returnInfo;

    if(!props.info){
      returnInfo = {
        item: props.info,
        imageUrl:imageShow("")
      }
    }else{
      returnInfo = {
       item: props.info,
       imageUrl:imageShow(props.info.imageUrl)
      }
    }

  return returnInfo;
},
})
</script>

<style lang="less" scoped>
.description {
  text-align: left; 
  font-size: 15px;
  padding-left: 140px;
  padding-right: 20px;
}
.orgname {
  text-align: left; 
  color:red;
  font-size: 24px;
  padding-left: 140px;
  padding-right: 20px;
}
img {
  float: left;
  width: 120px;
  height: 120px;
}
h1 {
  margin-bottom: 0px;
}
h3 {
  text-align: left; 
  font-weight: bold;
  font-size: 10px;
}
.search {
  margin-right: auto;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: 20px;

  overflow: hidden;
  width:65%;
  min-width: 800px;
  background: #fff;
}

.search:hover{
  background: #eee;
  cursor:pointer;
}

.search_img {
  float: left;
  width: 120px;
  height: 120px;
}
</style>